@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

.addressBook{
    width: 100%;
    height: 100%;

    .hide-tabs{
        .wm-tab-page{
            display: none;
        }

        .tabPane{
            top: 0;
        }

        .group-num{
                color:#bcbcbc;
            }
    }

    .tabs{
        position: absolute;
        width: 100%;
        top: 45px;
        bottom: 0px;

        .content{
            .clear{
                font-size: @font-size-base;
                text-align: right;
                color: @color-text-placeholder;
                padding-right: @h-spacing-lg;
                background: #f3f8fe;
                height: 34px;
                line-height: 34px;
            }

            .virtualOrg{
                height: 39px;
                line-height: 39px;
                border-bottom: 1 * @hd solid @border-color-base;
                background: #fff;

                .orgName{
                    font-size: @font-size-base;
                    line-height: @option-height;
                    height: @option-height;
                    padding: 0 @h-spacing-lg;
                    display: inline-block;
                    max-width: 100%;
                    position: relative;

                    .icon {
                        padding-left: @h-spacing-sm;
                        position: absolute;
                        top: 0;
                        right: 0;
                        .am-icon {
                            width: 9 *@hd;
                            height: 9 * @hd;
                        }
                    }
                }
            }

            .list{
                position: absolute;
                width: 100%;
                bottom: 0px;
                background: #fff;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;

                .am-tree-title{
                    line-height: 44px;
                    padding: 0;
                    padding-left: 5px;
                }
                
                .nomore{
                    text-align: center;
                    color: #868686;
                    padding-top: 19.5px;
                    font-size: 12px;

                    .left{
                        display: inline-block;
                        width: 20px;
                        height: 1px;
                        vertical-align: middle;
                        background: linear-gradient(270deg,#999,#fff);
                    }

                    .name{
                        padding: 0 10px;
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .right{
                        display: inline-block;
                        width: 20px;
                        height: 1px;
                        vertical-align: middle;
                        background: linear-gradient(90deg,#999,#fff);
                    }
                }

                &-search{
                    top: 0px;
                }

                &-swipe-action{
                    top: 34px;
                }

                &-base, &-org-tree{
                    top: 40px;
                }

                .resource-leaf{
                    line-height: 44px;
                    height: 44px;
                    margin: 0;
                    font-size: 14px;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    border-bottom: 1PX #ddd solid;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    padding: 7px 16px;
                    &-icon{
                        float: left;
                        border-radius: 50%;
                        margin-top: (@list-item-height - 36) / 2;
                        width: 36px;
                        height: 36px;
                        margin-left: 14px;
                    }
                    &-info{
                        padding-left: 56px;
                        .name{
                            color: #333;
                            display: inline-block;
                            width: 100%;
                        }
                        .jobtitle{
                            color: #666;
                            display: inline-block;
                            width: 100%;
                        }
                    }
                }

                &-tree{
                    top: 0px;
                    .groupInfo{
                        background: #f3f7fe;
                        line-height: 28px;
                        height: 28px;
                        color: #999;

                        .icon{
                            float: left;
                            margin-left: 8px;
                            margin-top: 5px;
                        }

                        .name{
                            padding-left: 5px;
                            font-size: @font-size-base;
                            width: calc(~"100% - 60px");
                            display: inline-block;
                        }

                        svg:last-child{
                            vertical-align: super;
                            color:@brand-primary;
                        }

                    }
                    .brand-btn{
                        background-color: @brand-primary;
                    }
                }

                &-all-resource{
                    top: 0px;
                    .am-indexed-list-container{
                        height: 100%;
                        width: 100%;
                    }
                }

                .delete{
                    color: #fff;
                    background: red;
                }

                .noData{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    display: table;
                    .panel{
                        display: table-cell;
                        vertical-align: middle;
                        text-align: center;
                        .icon{
                            width: 75px;
                            height: 75px;
                            &-1{
                                width: 50px;
                                height: 50px;
                            }
                        }
                        .msg{
                            padding-top: 12px;
                            color: #868686;
                            font-size: @font-size-base;
                        }
                    }
                }
            }
        }
    }
}